<template>
  <div>
    <el-dialog
      @closed="closeFormDialog"
      :title="!form.id ? '新增试卷' : '修改试卷'"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible">
      <el-form :model="form" :rules="rules" ref="form" @keyup.enter.native="saveOrUpdate()" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="试卷名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入试卷名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <!--<el-col :span="12">
            <el-form-item label="试卷类型" prop="type">
              <el-select
                  clearable
                  filterable
                  @change="changePaperType" v-model="form.type" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
-->
          <el-col :span="24">
            <el-form-item label="考试时间" prop="exam_time">
              <el-input v-model="form.exam_time" placeholder="考试时间(单位：分)"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row >
          <el-col :span="12">
            <el-form-item  prop="school_type" label="所属阶段">
              <el-select
                @change="changeSchoolType"
                v-model="form.school_type"
                filterable
                clearable
                placeholder="请输入所属阶段">
                <el-option
                  v-for="item in schoolTypeList"
                  :key="item.id"
                  :label="item.value"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="所属年级" prop="grade_type">
              <el-select
                clearable
                filterable
                @change="changeGradeType"
                v-model="form.grade_type"
                placeholder="请选择所属年级">
                <el-option
                  v-for="item in changeGradeTypeList"
                  :key="item.id"
                  :label="item.value"
                  :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="科目" prop="subject_id">
              <el-select clearable filterable v-model="form.subject_id" placeholder="请选择科目">
                <el-option
                  v-for="item in changeSubjectList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="排序" prop="sort">
              <el-input type="input" placeholder="请输入整数" v-model="form.sort"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input type="textarea" placeholder="备注/注意事项" v-model="form.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeForm">取消</el-button>
        <el-button type="primary" @click="saveOrUpdate()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {getSchoolType, getGradeType, changeSchoolTypeApi, changeGradeTypeApi} from '@/utils/education-api'
  import { getSchoolTypeListApi, getQuestionTypeListApi,
    getGradeTypeListApi, getDictValueListByParentId } from '@/utils/system-dict-api'
  import {isInt} from '@/utils/validate'
  export default {
    name: 'paper-form',
    props: {
      showFlag: {
        type: Boolean,
        required: false,
        default: false
      },

      formData: {
        type: Object,
        required: false,
        default: {}
      }
    },

    watch: {
      formData (val) {
        console.log(val)
        this.form = val
      },

      showFlag (val) {
        this.dialogVisible = val
      },

      'form.type' (val) {
        if (val === 3) {
          this.isEntranceTestPaper = true
        } else {
          this.isEntranceTestPaper = false
        }
      }
    },

    mounted () {
      this.form = this.formData
      this.dialogVisible = this.showFlag
      this.getSubjectList()
      let that = this
      getSchoolTypeListApi(data => {
        that.schoolTypeList = data
      })
      getGradeTypeListApi(data => {
        that.changeGradeTypeList = data
      })
    },

    data () {
      let validateSort = (rule, value, callback) => {
        if (value) {
          if (!isInt(value)) {
            return callback(new Error('请输入整数'))
          }
        }
        callback()
      }
      return {
        options: [],
        form: {},
        isEntranceTestPaper: false,
        subjectList: [],
        dialogVisible: false,
        gradeTypeList: [],
        changeGradeTypeList: [],
        changeSubjectList: [],
        schoolTypeList: [],
        rules: {
          name: [
            {required: true, message: '请输入试卷名称', trigger: 'blur'}
          ],
          exam_time: [
            {required: true, message: '请输入考试时间', trigger: 'blur'}
          ],
         /* type: [
            {required: true, message: '请选择试卷类型', trigger: 'blur'}
          ],*/
          school_type: [
            {required: true, message: '请选择所属阶段', trigger: 'blur'}
          ],
          grade_type: [
            {required: true, message: '请选择所属年级', trigger: 'blur'}
          ],
          subject_id: [
            {required: true, message: '请选择科目', trigger: 'blur'}
          ],
          sort: [
            {required: true, validator: validateSort, trigger: 'blur'}
          ]
        }
      }
    },

    methods: {
      getSubjectList () {
        let that = this
        that.axios.get(that.$http.httpUrl('/system/subject/list'), {
          params: {
            sqlId: 'system.subject.list'
          }
        }).then(function (response) {
          that.subjectList = response.data.data.dataList
          that.changeSubjectList = response.data.data.dataList
        })
      },

      changePaperType (val) {
        if (val === 3) {
          this.isEntranceTestPaper = true
        } else {
          this.isEntranceTestPaper = false
        }
      },

      changeGradeType (val) {
        let that = this
        if (that.form.subject_id) {
          that.form.subject_id = ''
        }
        changeGradeTypeApi(val, function (data) {
          that.subjectList = data
          that.changeSubjectList = data
        })
      },
      closeFormDialog () {
        this.dialogVisible = false
        this.$emit('closeDialog')
      },

      closeForm () {
        this.dialogVisible = false
        this.$emit('closeForm')
      },

      changeSchoolType (val) {
        let that = this
        if (that.form.grade_type) {
          that.form.grade_type = ''
        }
        let parentId = null
        for (let num in this.schoolTypeList) {
          if (this.schoolTypeList[num].code === val) {
            parentId = this.schoolTypeList[num].id
            break
          }
        }
        getDictValueListByParentId(parentId, 'grade_type', data => {
          that.changeGradeTypeList = data
        })
      },

      getGradeTypeList () {
        let that = this
        getGradeType(function (data) {
          that.gradeTypeList = data
          that.changeGradeTypeList = data
        })
      },

      getSchoolTypeList () {
        let that = this
        getSchoolType(function (data) {
          that.schoolTypeList = data
        })
      },

      saveOrUpdate () {
        let that = this
        that.$refs['form'].validate(function (valid, rules) {
          if (valid) {
            // delete (that.form.subject_name)
            that.axios.post(that.$http.httpUrl('/system/testPaper/saveOrUpdate'), that.form)
              .then(function (response) {
                if (response.data.code === 1) {
                  that.$message({
                    type: 'success',
                    message: response.data.message
                  })
                  that.dialogVisible = false
                  that.form = {}
                  that.$emit('close')
                } else {
                  that.$message({
                    type: 'error',
                    message: response.data.message
                  })
                }
              }).catch(function (error) {
                console.log(error)
              })
          } else {
            let message = ''
            for (let rule in rules) {
              message = rules[rule][0].message
              if (message) {
                break
              }
            }
            that.$message({
              type: 'error',
              message: message
            })
            return false
          }
        })
      }
    }
  }
</script>

<style>
</style>
